<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>青春宿舍物语</title>
		<link rel="stylesheet" href="css/style.css" type="text/css" />
        <style>
            /* 全局样式 */
            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                margin: 0;
                padding: 0;
                /* 修改为橙色渐变背景 */
                background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
                color: #333;
                animation: fadeIn 0.8s ease-out;
            }
    
            /* 页眉样式 */
            .header1 {
                /* 修改为橙色渐变背景 */
                background: linear-gradient(135deg, #ff9a62 0%, #ff7e34 100%);
                color: white;
                text-align: center;
                padding: 40px 0;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                position: relative;
                overflow: hidden;
            }
    
            .header1 h1 {
                margin: 0;
                font-size: 48px;
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
                animation: slideDown 0.8s ease-out;
            }
    
            /* 页眉的流星动画 */
            .meteor {
                position: absolute;
                width: 2px;
                height: 100px;
                /* 修改流星颜色为橙色系 */
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 200, 160, 1) 100%);
                animation: meteorFall 3s linear infinite;
            }
    
            /* 主要内容容器样式 */
            .container {
                max-width: 1000px;
                margin: 40px auto;
                padding: 30px;
                background-color: white;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
                border-radius: 15px;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
    
            .container:hover {
                transform: scale(1.02);
                box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
            }
    
            /* 小标题样式 */
            h2 {
                /* 修改为橙色文字 */
                color: #ff7e34;
                margin-top: 40px;
                margin-bottom: 15px;
                /* 修改为橙色边框 */
                border-bottom: 3px solid #ff7e34;
                padding-bottom: 8px;
                font-size: 30px;
                text-transform: uppercase;
                letter-spacing: 1px;
                animation: slideLeft 0.8s ease-out;
            }
    
            /* 列表样式 */
            .container ul {
                list-style-type: none;
                padding: 0;
            }
    
            .container ul li {
                margin-bottom: 15px;
                padding: 15px;
                background-color: #fff3e9;
                border-radius: 8px;
                transition: background-color 0.3s ease, transform 0.3s ease;
                position: relative;
                overflow: hidden;
            }
    
            .container ul li::before {
                content: "";
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.3);
                transition: left 0.3s ease;
            }
    
            .container ul li:hover {
                /* 修改悬停背景色为更亮的橙色  */
                background-color: #ffd9bf;
                transform: translateX(10px);
            }
    
            .container ul li:hover::before {
                left: 100%;
            }
    
            /* 段落样式 */
            p {
                line-height: 1.9;
                margin-bottom: 25px;
                text-align: justify;
                font-size: 18px;
                color: #555555;
                animation: fadeInText 1s ease-out;
            }
    
            /* 图片样式 */
            .photo {
                margin: 20px 0;
                text-align: center;
            }
    
            .photo img {
                max-width: 100%;
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
    
            .photo img:hover {
                transform: scale(1.05);
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
            }

            footer {
            background-color: #10100f;
            color: white;
            text-align: center;
            padding: 30px 20px;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        }
    
            /* 动画关键帧 */
            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
    
            @keyframes slideDown {
                from {
                    transform: translateY(-50px);
                    opacity: 0;
                }
                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
    
            @keyframes slideLeft {
                from {
                    transform: translateX(-50px);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
    
            @keyframes fadeInText {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
    
            @keyframes meteorFall {
                from {
                    top: -100px;
                    left: 10%;
                }
                to {
                    top: 100%;
                    left: 90%;
                }
            }
    
            /* 响应式设计 */
            @media (max-width: 768px) {
                .container {
                    margin: 20px;
                    padding: 20px;
                }
    
                .header1 h1 {
                    font-size: 36px;
                }
    
                h2 {
                    font-size: 24px;
                }
    
                p {
                    font-size: 16px;
                }
            }
        </style>
	</head>
	<body>
		<header>
			<div class="top">
				<div class="box">
					<div class="welcome">欢迎来的10215宿舍</div>
					<div class="topnav">
						<ul>
							<li><a href="注册登录.html">登录|注册</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="logo-search box">
				<div class="logo">
					<img src="img/logo.jpg" alt="" />
				</div>
				<div class="search">
					<form action="">
						<input type="text" placeholder="请输入关键词……" class="input_text" />
						<input type="submit" value="搜索" class="input_submit" />
						<button class="searchbtn" onclick="searchtopic()"></button>
					</form>
				</div>
			</div>
		</header>
		<nav>
			<ul class="daohanglan">
				<li class="dropdown">
					<a href="index.html" class="dropbtn">首页</a>
				</li>
				<li class="dropdown">
					<a href="宿舍成员.html" class="dropbtn">宿舍成员</a>
				</li>
				<li class="dropdown">
					<a href="宿舍生活2.html" class="dropbtn">宿舍生活</a>
				</li>
				<li class="dropdown">
					<a href="宿舍故事.html" class="dropbtn">宿舍故事</a>
				</li>
			</ul>
		</nav>
		<div class="header1">
            <h1>我们的宿舍生活</h1>
            <!-- 流星元素 -->
            <div class="meteor"></div>
            <div class="meteor" style="animation-delay: 1s;"></div>
            <div class="meteor" style="animation-delay: 2s;"></div>
        </div>
        <div class="container">
            <!-- 宿舍公约 -->
            <h2>宿舍公约</h2>
            <p>为了营造一个和谐、舒适的宿舍环境，我们共同制定了以下公约：</p>
            <ul>
                <li>作息时间: 晚上12点后保持安静,不影响他人休息。</li>
                <li>卫生值日：每天轮流打扫卫生，保持宿舍整洁。</li>
                <li>用电安全：禁止使用大功率电器，离开宿舍时关闭电源。</li>
                <li>公共物品：爱护公共设施，损坏照价赔偿。</li>
                <li>尊重他人：保持安静，不影响他人休息和学习。</li>
            </ul>
            <div class="photo">
                <img src="img/宿舍公约.jpg" alt="宿舍公约照片" />
            </div>
    
            <!-- 宿舍活动 -->
            <h2>宿舍活动</h2>
            <p>我们宿舍成员经常一起参加各种活动，增进感情，丰富生活：</p>
            <ul>
                <li>学习：互相学习，互帮互助，大家都很友好，乐于助人。</li>
                <li>聚餐：偶尔一次宿舍聚餐，大家一起讨论哪家的食物好吃。</li>
                <li>娱乐：平常大家聚在一起聊天、打牌，放松心情。</li>
                <li>运动：有时一起去跑步、打篮球、散步等等。</li>
            </ul>
            <div class="photo">
                <img src="img/聚餐.jpg" alt="宿舍活动照片" />
            </div>
    
            <!-- 宿舍趣事 -->
            <h2>宿舍趣事</h2>
            <p>宿舍生活中总有一些让人忍俊不禁的趣事：</p>
            <p>有一次台风天，台风呼啸，宿舍断电断电，四人围坐打牌，输者编故事，笑声盖过风雨，夜愈深，故事越来越离奇。</p>
            <p>还有一次，我们一起在宿舍看恐怖片，看到紧张刺激的情节时，周围瞬间安静下来，甚至可以听到彼此的心跳声，突然一个鬼脸出现把我们都吓了一跳，被吓到后大家都忍不住笑了，这一幕也成了我们宿舍的回忆。</p>
            <div class="photo">
                <img src="img/打牌.png" alt="宿舍趣事照片" />
            </div>
        </div>
		
		<footer>
			&copy; 戴海琴|高晨雨|黄晚晴|王乐乐</br>10215宿舍 版权所有
		</footer>
	</body>
</html>